<template>
  <!-- <h1>Setup Store写法</h1>
  <h1>age:{{test.obj.age}}</h1>
  <h1>我是通过计算属性加5后的age:{{test.add5}}</h1>
  <h1>计数器:{{test.count}}</h1>
  <button @click="test.add">点我计数器加1</button>

  <hr>
  <h1>Option Store写法</h1>
  <h2>{{user.user.name}}--{{user.user.age}}</h2>
  <h2>我是通过计算属性加5后的age:{{user.ageadd5}}</h2>
  <button @click="user.ageadd">点我age加1</button> -->

  <h1>Setup Store写法</h1>
  <h1>age:{{obj.age}}</h1>
  <h1>我是通过计算属性加5后的age:{{add5}}</h1>
  <h1>计数器:{{count}}</h1>
  <button @click="add">点我计数器加1</button>

  <hr>
  <h1>Option Store写法</h1>
  <h2>{{use.name}}--{{use.age}}</h2>
  <h2>我是通过计算属性加5后的age:{{ageadd5}}</h2>
  <button @click="ageadd">点我age加1</button>
</template> 

<script>
// 引入Pinia中的仓库
import { useCounterStore, userOptionStore } from './stores/counter'
import { storeToRefs } from 'pinia'
export default {
  setup() {
    // 接收pinia中的数据
    const test = useCounterStore()
    const {add}=test
    const user = userOptionStore()
    const {ageadd}=user
    return {
      // storeToRefs无法扩展方法，要想使用方法，可以直接解构
      ...storeToRefs(test),
      add,
      ...storeToRefs(user),
      ageadd
    }
  }
}
</script>

<style>
</style>